<template>
    <div class="commp-pulldown-table">
        <vxe-pulldown ref="xDown" transfer>
            <template #default>
                <!-- {{ pullValue }} -->
                <vxe-input
                    :key="vexInputKey"
                    v-model:value="pullValue" 
                    suffix-icon="vxe-icon-search" 
                    placeholder="请选择"
                    @change="changeEvent"
                    @keyup="keyupEvent" 
                    @focus="focusEvent" 
                    @suffix-click="suffixClick"
                    :disabled="disabled"
                >
                </vxe-input>
            </template>
            <template #dropdown>
                <div class="my-dropdown4">
                    <vxe-grid
                    border
                    auto-resize
                    height="300"
                    :row-config="{isHover: true}"
                    :loading="loading"
                    :pager-config="tablePage"
                    :data="tableList"
                    :columns="tableColumn"
                    @cell-click="cellClickEvent"
                    @page-change="pageChangeEvent">
                    </vxe-grid>
                </div>
            </template>
        </vxe-pulldown>
    </div>
</template>
<script>
import { axios } from '@/utils/request'
export default {
    components:{

    },
    props:{
        selectTableConfig:{
            type:Object,
            default:{},
            required:false,
        },
        tableColumn:{
            type:Array,
            default:[],
            required:false,
        },
        disabled:{
            type:Boolean,
            default:false,
            required:false,
        },
        currentVlaue:{
            type:String,
            default:'',
            required:false,
        }
    },
    data(){
        return{
            pullValue: this.currentVlaue,
            loading: false,
            tableList:[],
            tablePage: {
                total: 0,
                currentPage:1,
                pageSize: 10
            },
            vexInputKey:null
        }
    },
    watch:{

    },
    mounted(){
        this.getData({},this.tablePage)
    },
    methods:{
        async getData(data,tablePage){
            return new Promise((resolve, reject) => {
                this.loading = true
                let parameter = {}
                parameter[this.selectTableConfig.rowName] = this.pullValue
                axios({
                    url: this.selectTableConfig.api,
                    method:'get' ,
                    params: {...parameter,fywflcode:this.selectTableConfig.fywflcode,pageNo:tablePage.currentPage,pageSize:tablePage.pageSize},
                    url_1:'outside'
                }).then(res=>{
                    if(res.result && res.result.records){
                        this.tableList = res.result.records
                        this.tablePage.total = res.result.total || 0;
                    }else{
                        this.tableList = []
                    }
                    
                    
                })
                this.loading = false
                resolve(!this.loading);
            });
        },
        changeEvent(val){
            //console.log('4444',val)
            this.$emit('changeEvent',this.pullValue)
            this.getData({},this.tablePage)
        },
        keyupEvent () {
            const { pullValue } = this
            this.getData({},this.tablePage)
            // this.loading = true
            // setTimeout(() => {
            //     this.loading = false
            //     if (value) {
            //         this.tableData = this.tableList.filter(row => row.name.indexOf(value) > -1)
            //         } else {
            //         this.tableData = this.tableList.slice(0)
            //         }
            //     }, 100)
        },

        focusEvent () {
            this.getData({},this.tablePage)
            this.$refs.xDown.showPanel()
        },
        suffixClick () {
            this.getData({},this.tablePage)
            this.$refs.xDown.togglePanel()
        },
        cellClickEvent ({ row }) {
            //console.log('获取企业的东西啊',row[this.selectTableConfig.rowName])
            this.$nextTick(()=>{
                this.pullValue = row[this.selectTableConfig.rowName]
            })
            this.$refs.xDown.hidePanel()
            this.vexInputKey = Date.now()
            this.$emit('cellClickEvent',row)//获取当前列
        },
        pageChangeEvent ({ currentPage, pageSize }) {
            this.tablePage.currentPage = currentPage
            this.tablePage.pageSize = pageSize
        }
    }
}
</script>
<style lang="less">
.commp-pulldown-table{
    .my-dropdown4 {
        width: 600px;
        height: 300px;
        background-color: #fff;
        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    }
}

</style>